/**
 * 组件名称：工具功能展示组件
 * 使用场景：内嵌入轮播图组件的每一页中，展示某个工具的功能
 * 功能介绍：主要是展示功能，并提供入口按钮
 * 功能进度：100%
 * 待办事项：无
 */

import Link from "next/link";
import {
  Stack,
  Group,
  Container,
  Title,
  List,
  Image,
  Button,
  Text,
  ThemeIcon,
  rem,
} from "@mantine/core";
import {IconCheck} from "@tabler/icons-react";

// 左侧图片数据格式
interface ImageProps {
  alt: string;
  src: string;
}
// 右侧详情数据格式
interface InfoProps {
  name: string;
  text: string;
  items: string[];
}

export const IpdToolShow = ({
  link,
  image,
  info,
}: {
  link: string;
  image: ImageProps;
  info: InfoProps;
}) => {
  return (
    <Group justify="space-between" pt={30}>
      <Container>
        <Image alt={image.alt} src={image.src} w={400} />
      </Container>

      <Container>
        <Stack align="flex-start" justify="center" h={350} w={400}>
          <Title>{info.name}</Title>

          <Text c="dimmed">{info.text}</Text>

          <List
            my="md"
            spacing="sm"
            size="sm"
            icon={
              <ThemeIcon size={20} radius="xl">
                <IconCheck style={{width: rem(12), height: rem(12)}} stroke={1.5} />
              </ThemeIcon>
            }
          >
            {info.items.map((item) => (
              <List.Item key={item}>{item}</List.Item>
            ))}
          </List>

          <Button mt="lg" component={Link} href={link}>
            开始使用
          </Button>
        </Stack>
      </Container>
    </Group>
  );
};
